//  全屏组件
<template>
  <div>
    <svg-icon icon-class="fullscreen" style="color: #fff;width: 20px; height: 20px;cursor: pointer;" @click="handleChangeScreen" />
  </div>
</template>

<script>
// import install screenfull
import ScreenFull from 'screenfull'
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    // 修改全屏
    handleChangeScreen() {
      if (!ScreenFull.isFullscreen) { // 判断浏览器是否支持插件, 不支持使用原生
        // 不支持就使用原生
        if (!this.isFullscreen) {
          document.documentElement.requestFullscreen() // 进入全屏
        } else {
          document.exitFullscreen() // 退出 全屏状态
        }
        this.isFullscreen = !this.isFullscreen
      }
      ScreenFull.toggle() // 两种状态进行切换
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
